import React, { Component } from 'react';
import './Main.scss'
import img from '../../image/tx.jpg'
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dingdanList: [
                { icon: 'iconfont icon-icon-test', txt: '待付款' },
                { icon: 'iconfont icon-daifahuo', txt: '待发货' },
                { icon: 'iconfont icon-yifahuo', txt: '已发货' },
                { icon: 'iconfont icon-daipingjia', txt: '待评价' }
            ],
            yewuList: ['领券中心', '我的评价', '收货地址', '我的客服']
        }
    }
    toLogin(){
        this.props.history.push({ pathname:'/index/AppLogin'})
    }
    toRegister(){
        this.props.history.push({pathname:'/index/AppRegister'})
    }
    toCollection(){
        this.props.history.push({pathname:'/index/Collection'})
    }
    render() {
        return (
            <div className='main'>
                <div className="head">
                    <div className="hdtop">
                        <div className="topr">
                            <div className='tb'>
                                <span className="iconfont icon-dian"></span> |
                                <span className="iconfont icon-icon-yuanxk
"></span>
                            </div>
                        </div>
                    </div>
                    <div className="topbtm">
                        <div className="lft">
                            <img src={img} alt="" /> 教
                        </div>
                        <div className="rgt">
                            <button className='btn1'  onClick={()=>{this.toLogin()}}>登录</button>
                            <button className='btn2' onClick={()=>{this.toRegister()}}>注册</button>
                        </div>
                    </div>
                </div>
                <div className="bk">
                    <div className='bkbox' onClick={()=>{this.toCollection()}}>
                        <p>1</p>
                        收藏
                    </div>
                    <div className='bkbox'>
                        <p>0</p>
                        积分
                    </div>
                    <div className='bkbox'>
                        <p>0</p>
                        优惠券
                    </div>
                </div>
                <div className="dingdan">
                    <div className="dtop">
                        <div className="dtleft">我的订单</div>
                        <div className="dtright">查看历史订单 &gt; </div>
                    </div>
                    <div className="dbtm">
                        {
                            this.state.dingdanList.map((item, index) => {
                                return (
                                    <div className="btmbox" key={index}>
                                        <div className="icon">
                                            <span className={item.icon}></span>
                                        </div>
                                        <p>{item.txt}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="huiyuan">
                    <div className='text'>会员中心</div>
                    <span>&gt;</span>
                </div>
                {
                    this.state.yewuList.map((item, index) => {
                        return (
                            <div className='list' key={index}>
                                <div className='text'>{item}</div>
                                <span>&gt;</span>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Main;